import { useState, useEffect } from 'react';
import { X, Cookie, Shield, Settings } from 'lucide-react';
import { Button } from './Button';
import { CookieManager } from '../lib/cookieManager';

export function CookieBanner() {
  const [isVisible, setIsVisible] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    // 检查用户是否已经接受过Cookie政策
    if (!CookieManager.hasConsent()) {
      // 延迟显示以确保页面已加载
      const timer = setTimeout(() => {
        setIsVisible(true);
        // 添加动画延迟
        setTimeout(() => setIsAnimating(true), 100);
      }, 1500);
      
      return () => clearTimeout(timer);
    }
  }, []);

  const handleAcceptAll = () => {
    CookieManager.acceptAll();
    hideBanner();
  };

  const handleAcceptNecessary = () => {
    CookieManager.acceptNecessaryOnly();
    hideBanner();
  };

  const hideBanner = () => {
    setIsAnimating(false);
    setTimeout(() => setIsVisible(false), 300);
  };

  if (!isVisible) return null;

  return (
    <div className="fixed inset-0 z-50 pointer-events-none">
      {/* 背景遮罩 */}
      <div 
        className={`absolute inset-0 bg-black transition-opacity duration-300 ${
          isAnimating ? 'bg-opacity-30' : 'bg-opacity-0'
        }`}
      />
      
      {/* Cookie横幅 */}
      <div 
        className={`absolute bottom-0 left-0 right-0 pointer-events-auto transform transition-transform duration-500 ease-out ${
          isAnimating ? 'translate-y-0' : 'translate-y-full'
        }`}
      >
        <div className="bg-[#061a2c] border-t-2 border-[#06d6a0] shadow-2xl">
          <div className="container mx-auto px-4 md:px-8 py-4 md:py-6">
            <div className="flex flex-col lg:flex-row items-start lg:items-center gap-4 md:gap-6">
              {/* 图标和标题 */}
              <div className="flex items-center gap-3 flex-shrink-0">
                <div className="w-10 h-10 md:w-12 md:h-12 bg-[#06d6a0] bg-opacity-20 rounded-full flex items-center justify-center">
                  <Cookie className="text-[#06d6a0]" size={20} />
                </div>
                <div>
                  <h3 className="text-base md:text-lg font-bold text-white">Cookie Settings</h3>
                  <p className="text-xs md:text-sm text-gray-400">We respect your privacy</p>
                </div>
              </div>

              {/* 内容 */}
              <div className="flex-1 min-w-0">
                <p className="text-gray-300 text-sm leading-relaxed">
                  We use cookies to enhance your browsing experience, provide personalized content, and analyze website traffic.
                  You can choose to accept all cookies or only necessary ones.
                  <a 
                    href="/privacy-policy" 
                    className="text-[#06d6a0] hover:underline ml-1"
                  >
                    Learn more
                  </a>
                </p>
                
                {/* Cookie类型指示器 - 移动端隐藏 */}
                <div className="hidden md:flex flex-wrap gap-2 mt-3">
                  <div className="flex items-center gap-1 bg-[#0a2540] px-2 py-1 rounded-full text-xs">
                    <Shield size={12} className="text-green-400" />
                    <span className="text-gray-300">Essential Cookies</span>
                  </div>
                  <div className="flex items-center gap-1 bg-[#0a2540] px-2 py-1 rounded-full text-xs">
                    <Settings size={12} className="text-blue-400" />
                    <span className="text-gray-300">Functional Cookies</span>
                  </div>
                  <div className="flex items-center gap-1 bg-[#0a2540] px-2 py-1 rounded-full text-xs">
                    <Settings size={12} className="text-yellow-400" />
                    <span className="text-gray-300">Analytics Cookies</span>
                  </div>
                </div>
              </div>

              {/* 按钮组 */}
              <div className="flex flex-col sm:flex-row gap-2 md:gap-3 flex-shrink-0 w-full lg:w-auto">
                <button
                  onClick={handleAcceptNecessary}
                  className="px-3 md:px-4 py-2 text-sm font-medium text-gray-300 border border-[#1a3a5c] rounded-lg hover:bg-[#0a2540] hover:text-white transition-colors"
                >
                  Essential Only
                </button>
                <Button
                  onClick={handleAcceptAll}
                  size="sm"
                  className="flex items-center justify-center text-sm"
                >
                  Accept All Cookies
                </Button>
              </div>

              {/* 关闭按钮 */}
              <button
                onClick={hideBanner}
                className="absolute top-2 right-2 md:top-4 md:right-4 lg:relative lg:top-0 lg:right-0 p-1 md:p-2 text-gray-400 hover:text-white transition-colors"
                aria-label="Close cookie banner"
              >
                <X size={18} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
